<template>
	<view class="column h100">
		<view class="plr30 pt40 pb29 esay-out1 bgf mb16">
			<view class="input-ctn">
				<view class="justify-start align-center" @click="navTo('pages/find-car/city')">
					<text class="mr12 pb5">全国</text>
					<u-icon name="arrow-down" size="20rpx"></u-icon>
				</view>
				<u-line direction="col" length="31rpx" color="#C2C2C2" margin="0 18rpx 0 13rpx"></u-line>
				<u-icon name="search" size="40rpx" color="#A8A8A8" bold></u-icon>
				<view class="flex-1 ml15">
					<input class="w100 input-css" v-model="queryParams.keywords" placeholder="输入你要找的车" type="text"
						placeholder-class="holder" />
				</view>
			</view>
		</view>
		<scroll-view scroll-y class="flex-1 w-calc-30 ptb30" :refresher-enabled="scrollViewTool.isEnabled"
			refresher-background="rgba(0,0,0,0)" :refresher-triggered="scrollViewTool.triggered"
			@refresherrefresh="pullDownRefresh" @refresherrestore="scrollViewTool.triggered = false"
			@refresherabort="triggered = false" @scrolltolower="reachBottom">
			<view class="column" v-if="listData.length>0">
				<view class="clue-item">
					<view class="pl30 pr25">
						<view class="user-info">
							<view class="customer">
								<text>客户姓名:</text>
								<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/message/edit.png" width="35rpx"
									height="31rpx"></u-image>
							</view>
							<view class="status">
								已跟进
							</view>
						</view>
						<view class="car">
							<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/material/20250524120413.jpg"
								width="147rpx" height="112rpx" radius="15rpx"></u-image>
							<text class="ml16">车商:李*15700000001点击了您发布的(最新到18年12月上牌</text>
						</view>
						<view class="grid-2 info">
							<view class="info-item">
								<text class="name">线索类型：</text>
								<text class="value">朋友圈车源·电话</text>
							</view>
							<view class="info-item">
								<text class="name">手机号码：</text>
								<view class="value justify-end align-center">
									<text>15700000001</text>
									<u-image src="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/message/copy.png" width="21rpx"
										height="25rpx"></u-image>
								</view>
							</view>
							<view class="info-item">
								<text class="name">客户状态：</text>
								<view class="status-box">
									<custom-select :height="43" fontSize="22rpx" align="left" :iconSize="22" :options="[]"
										@confirm="onStatus"></custom-select>
								</view>
							</view>
							<view class="info-item">
								<text class="name">线索时间：</text>
								<text class="value">2025-04-10</text>
							</view>
						</view>
					</view>
					<u-line color="#D3D3D3"></u-line>
					<view class="record">
						<view class="title">
							<text class="name">照踪记录</text>
							<text v-if="false" class="no-record">暂无记录</text>
							<text class="look-more" @click="navTo('pages/message/follow-record')">查看更多>></text>
						</view>
						<view class="record-item">
							<view class="time">2025 04-10 14:14:26</view>
							<view class="content">
								同行
							</view>
						</view>
					</view>
					<u-line color="#D3D3D3"></u-line>
					<view class="bottom">
						<view class="delete" @click="onDelete">
							<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/message/delete.png"
								size="31rpx"></u-icon>
							<text class="ml6">删除</text>
						</view>
						<view class="buts">
							<view class="but but-open">
								<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/message/phone.png"
									size="38rpx"></u-icon>
								<text class="ml13">打电话</text>
							</view>
							<view class="but but-fankui" @click="showFollow=true">
								<u-icon name="https://monvkeji.oss-cn-chengdu.aliyuncs.com/xunche/message/message.png"
									size="38rpx"></u-icon>
								<text class="ml13">跟进反馈</text>
							</view>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadStatus" />
			</view>
			<view class="centerV flex-1 hb" v-else>
				<fr-empty-data description="暂无线索" />
			</view>
		</scroll-view>
		<!-- 跟进反馈 -->
		<follow-up v-model:show="showFollow" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		navTo
	} from '@/core/app';
	import {
		getPageList
	} from '@/api/message/clue.js';
	import {
		useLoadPageList
	} from '@/hooks/useLoadPageList/useLoadPageList';
	import customSelect from "@/components/custom-select/index.vue";
	// import followUp from './components/follow-up.vue';
	import {
		onShow
	} from "@dcloudio/uni-app";

	/* 跟进控制 */
	const showFollow = ref(false)

	const queryParams = ref({
		keywords: ''
	});
	const {
		listData,
		loadStatus,
		scrollViewTool,
		reachBottom,
		pullDownRefresh,
		reSetList
	} = useLoadPageList(getPageList, queryParams.value);
	onShow(() => {
		reSetList()
	})
	/* 选择状态 */
	function onStatus() {

	}

	/* 删除线索 */
	function onDelete() {

	}
</script>

<style scoped lang="scss">
	.input-ctn {
		width: 100%;
		height: 73rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		background-color: #f4f5f9;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding: 0 16rpx;
		box-sizing: border-box;

		.input-css {
			font-weight: 400;
			font-size: 26rpx;
		}

		.holder {
			font-weight: 400;
			font-size: 26rpx;
			color: #bdbcba;
		}
	}

	.clue-item {
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 19rpx 0 24rpx 0;
		box-sizing: border-box;

		.user-info {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.customer {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #7F7F7F;
			}

			.status {
				font-weight: 400;
				font-size: 28rpx;
				color: #F3933A;
			}
		}

		.car {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 20rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			padding: 24rpx 32rpx 24rpx 24rpx;
			box-sizing: border-box;
			background-color: #F4F5F9;
			border-radius: 10rpx;
		}

		.info {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			margin-top: 8rpx;
			margin-bottom: 20rpx;

			.info-item {
				margin-top: 20rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.name {
					font-weight: 400;
					font-size: 22rpx;
					color: #7F7F7F;
				}

				.value {
					font-weight: 400;
					font-size: 22rpx;
					color: #000000;
				}

				.status-box {
					width: 180rpx;
					height: 43rpx;
					background: #ECECEC;
					border-radius: 5rpx;
					font-size: 22rpx;
					padding: 0 15rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.record {
			margin-top: 20rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.name {
					font-weight: 400;
					font-size: 22rpx;
					color: #000000;
				}

				.no-record {
					font-weight: 400;
					font-size: 22rpx;
					color: #7F7F7F;
				}

				.look-more {
					font-weight: 400;
					font-size: 22rpx;
					color: #0759BB;
				}
			}

			.record-item {
				margin-top: 8rpx;
				margin-bottom: 33rpx;

				.time {
					font-weight: 400;
					font-size: 22rpx;
					color: #7F7F7F;
				}

				.content {
					padding: 26rpx 22rpx;
					box-sizing: border-box;
					font-weight: 400;
					font-size: 26rpx;
					color: #000000;
					margin-top: 21rpx;
					background-color: #F4F5F9;
					border-radius: 10rpx;
				}
			}
		}

		.bottom {
			width: 100%;
			padding: 28rpx 19rpx 0 28rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.delete {
				width: 125rpx;
				height: 50rpx;
				background: #ECECEC;
				border-radius: 5rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #000000;
				display: flex;
				justify-content: center;
				align-content: center;
				line-height: 50rpx;
			}

			.buts {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 19rpx;

				.but {
					width: 187rpx;
					height: 64rpx;
					border-radius: 15rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 5rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.but-open {
					background-color: #F65812;
				}

				.but-fankui {
					background-color: #4DC4EC;
				}
			}
		}
	}
</style>